<template>
	<div>
		<h1 class="gametitle">Aloha 2048</h1>
		<div class="homePageButtom">
			<router-link to="/onegame">快速游戏</router-link>
			<a href="gameTogether/gameTogeher.html">多人模式</a>
			<router-link to="/introduce">玩法介绍</router-link>
			<router-link to="/author">开发人员</router-link>
		</div>
		<button class="RankingListButton" @click="isRankingList = true">
			排行榜
		</button>
		<!-- 排行榜 -->
		<RankingList
			v-if="isRankingList"
			:closeRankingList="closeRankingList"></RankingList>
		<!-- 分享页 -->
		<SharePage v-if="isSharePage" :closeSharePage="closeSharePage"></SharePage>

		<button class="circleButton" @click="isSharePage = true">分享</button>

		<div class="SwipeImg"><SwipeImg /></div>
	</div>
</template>

<script>
	import RankingList from './RankingList';
	import SharePage from './SharePage.vue';
	import SwipeImg from './SwipeImg.vue';

	export default {
		name: 'HomePage',
		components: {
			RankingList,
			SharePage,
			SwipeImg,
		},
		data() {
			return {
				isRankingList: false,
				isSharePage: false,
			};
		},
		methods: {
			closeRankingList() {
				this.isRankingList = false;
			},
			closeSharePage() {
				this.isSharePage = false;
			},
		},
	};
</script>

<style scoped>
	.gametitle {
		font-family: 'Microsoft YaHei';
		font-size: 60px;
		/* color: #776e65;  */
		background-image: linear-gradient(to bottom right, #ffa600, #d7904f);
		/* background-clip: text; */
		-webkit-background-clip: text;
		color: transparent;
	}

	div.homePageButtom {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	div.homePageButtom a {
		display: block;
		text-decoration: none;
		background-color: #b69d86;

		color: white;
		font-size: 22px;
		border-radius: 6px;
		padding: 20px 35px;
		margin: 20px;
		width: 300px;
		letter-spacing: 5px;
	}

	.RankingListButton {
		height: 80px;
		width: 80px;
		border-radius: 50%;
		background-color: antiquewhite;
		border: none;
		position: fixed;
		top: 30px;
		right: 20px;
		font-size: large;
		font-weight: 800;
		z-index: 1000;
	}
	.circleButton {
		height: 80px;
		width: 80px;
		border-radius: 50%;
		background-color: antiquewhite;
		border: none;
		position: fixed;
		bottom: 30px;
		right: 20px;
		font-size: large;
		font-weight: 800;
		z-index: 1000;
	}
	.SwipeImg {
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
	}
</style>
